<template>
  <div>
    <div class="flex-center m-b-10" v-show="showSearchFlag">
      <div class="flex-center">
        <el-input
          size="small"
          clearable
          style="width: 400px"
          v-model="search.queryWord"
          class="m-r-10"
          placeholder="请输入搜索关键字"
          @change="query"
        />
      </div>
      <div class="flex-center">
        <el-button
          v-if="permissionList.addBtn"
          size="small"
          type="primary"
          @click="addNew"
        >
          新增团队客户
        </el-button>
      </div>
    </div>
    <el-table
      class="my-table"
      height="calc(100vh - 260px)"
      :data="data"
      v-loading="loading"
      style="width: 100%"
      :header-cell-style="{ text: 'center' }"
      border
    >
      <el-table-column type="index" align="center" label="序号" width="60" />
      <el-table-column
        prop="teamName"
        align="center"
        label="客户名称"
        min-width="200"
      />
      <el-table-column
        prop="concatName"
        align="center"
        label="联系人"
        min-width="180"
      />
      <el-table-column
        prop="concatPhone"
        align="center"
        label="联系人电话"
        min-width="130"
      />
      <el-table-column
        prop="agreePrice"
        align="center"
        label="协议价格(元/kg)"
        width="180"
      />
      <el-table-column
        align="center"
        prop="creditMoney"
        label="额度月使用上限(元)"
        width="180"
      />
      <el-table-column
        prop="billDay"
        align="center"
        label="账期(天)"
        width="120"
      />
      <el-table-column
        prop="account"
        align="center"
        label="登陆账号"
        width="120"
      />
      <el-table-column label="客户状态" align="center" width="100">
        <template v-slot="scope">
          {{ scope.row.teamStatus | teamStatus }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="150">
        <template v-slot="scope">
          <el-dropdown @command="handleCommand">
            <div class="el-dropdown-link">
              操作列表
              <i class="el-icon-arrow-down el-icon--right"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-if="permissionList.viewBtn"
                icon="el-icon-view"
                :command="{ c: '查看', v: scope.row }"
              >
                查看
              </el-dropdown-item>
              <el-dropdown-item
                v-if="scope.row.teamStatus === 1 && permissionList.freezeBtn"
                icon="el-icon-edit"
                :command="{ c: '冻结', v: scope.row }"
              >
                冻结
              </el-dropdown-item>
              <el-dropdown-item
                v-if="scope.row.teamStatus === 0 && permissionList.thawBtn"
                icon="el-icon-edit"
                :command="{ c: '解冻', v: scope.row }"
              >
                解冻
              </el-dropdown-item>
              <el-dropdown-item
                v-if="scope.row.userStatus === 1 && permissionList.enableBtn"
                icon="el-icon-edit"
                :command="{ c: '启用', v: scope.row }"
              >
                启用
              </el-dropdown-item>
              <el-dropdown-item
                v-if="scope.row.userStatus === 0 && permissionList.disabledBtn"
                icon="el-icon-edit"
                :command="{ c: '禁用', v: scope.row }"
              >
                禁用
              </el-dropdown-item>
              <el-dropdown-item
                v-if="permissionList.resetPwdBtn"
                icon="el-icon-edit"
                :command="{ c: '重置密码', v: scope.row }"
              >
                重置密码
              </el-dropdown-item>
              <el-dropdown-item
                v-if="permissionList.deleteBtn"
                icon="el-icon-close"
                :command="{ c: '删除', v: scope.row }"
              >
                删除
              </el-dropdown-item>
              <el-dropdown-item
                icon="el-icon-edit"
                v-if="permissionList.loginAccountBtn"
                :command="{ c: '登陆账号', v: scope.row }"
              >
                登陆账号
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <app-pagination
      ref="paginationRef"
      :total="total"
      :page-size="page.size"
      class="m-t-20"
      @change="pageChange"
    />
    <el-dialog
      title="登陆账号"
      append-to-body
      :visible.sync="showLoginAccountDialog"
      width="600px"
    >
      <contract-customer-login-account @hide="hide" :info="accountInfo" />
    </el-dialog>
    <el-dialog
      title="新增团队客户"
      append-to-body
      width="600px"
      center
      :visible.sync="showcustomerAddDialog"
    >
      <contract-customer-add-content @back="handleBack" />
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import AppPagination from "@/components/business/app-pagination";
import {
  confirmWarning,
  equals,
  getRecords,
  getTotal,
  msgSuccess,
  strEquals,
} from "@/util/common-util";
import {
  close,
  deleteRecord,
  frozen,
  getPage,
  open,
  resetPwd,
  unfrozen,
} from "@/api/business/filling-team";
import AuthWrapper from "@/components/business/auth-wrapper";
import ContractCustomerLoginAccount from "./contract-customer-login-account.vue";
import ContractCustomerAddContent from "@/views/customer/compontents/contract-customer-add-content.vue";
export default {
  name: "contract-customer-list",
  components: {
    ContractCustomerAddContent,
    AuthWrapper,
    AppPagination,
    ContractCustomerLoginAccount,
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.permission["customer-team:add"],
        viewBtn: this.permission["filling-team:detail"],
        freezeBtn: this.permission["filling-team:freeze"],
        thawBtn: this.permission["filling-team:thaw"],
        enableBtn: this.permission["filling-team:enable"],
        disabledBtn: this.permission["filling-team:disabled"],
        resetPwdBtn: this.permission["filling-team:reset-pwd"],
        deleteBtn: this.permission["filling-team:delete"],
        loginAccountBtn: this.permission["filling-team:login-account"],
      };
    },
  },
  data() {
    return {
      page: {
        size: 20,
        current: 1,
      },
      total: 0,
      search: {
        queryWord: "",
      },
      showSearchFlag: true,
      loading: false,
      data: [],
      showLoginAccountDialog: false,
      showcustomerAddDialog: false,
      accountInfo: {},
    };
  },
  mounted() {
    this.query();
  },
  filters: {
    teamStatus(v) {
      if (equals(v, 0)) return "冻结";
      if (equals(v, 1)) return "正常";
      return "未知";
    },
    userStatus(v) {
      if (equals(v, 0)) return "正常";
      if (equals(v, 1)) return "禁用";
      return "未知";
    },
  },
  methods: {
    hide(isShow) {
      this.showLoginAccountDialog = false;
      if (isShow) this.query();
    },
    handleBack(flag) {
      this.showcustomerAddDialog = false;
      if (flag) this.query();
    },
    pageChange(_page) {
      this.page = _page;
      this.query();
    },
    refresh() {
      this.$refs.paginationRef.reset();
    },
    query() {
      this.loading = true;
      getPage(this.page, this.search)
        .then((res) => {
          this.data = getRecords(res);
          this.total = getTotal(res);
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    addNew() {
      this.showcustomerAddDialog = true;
    },
    handleCommand(_command) {
      const row = _command.v;
      if (strEquals(_command.c, "删除")) {
        confirmWarning(
          "删除操作",
          `确定删除团队客户 ${row.teamName} ？`,
          () => {
            deleteRecord(row.id).then((res) => {
              this.query();
              msgSuccess();
            });
          }
        );
      }
      if (strEquals(_command.c, "重置密码")) {
        confirmWarning(
          "重置密码",
          `确定重置团队客户 ${row.teamName} 密码？`,
          () => {
            resetPwd(row.id).then((res) => {
              this.query();
              msgSuccess();
            });
          }
        );
      }
      if (strEquals(_command.c, "解冻")) {
        confirmWarning(
          "解冻操作",
          `确定解冻团队客户 ${row.teamName} ？`,
          () => {
            unfrozen(row.id).then((res) => {
              this.query();
              msgSuccess();
            });
          }
        );
      }
      if (strEquals(_command.c, "冻结")) {
        confirmWarning(
          "冻结操作",
          `确定冻结团队客户 ${row.teamName} ？`,
          () => {
            frozen(row.id).then((res) => {
              this.query();
              msgSuccess();
            });
          }
        );
      }
      if (strEquals(_command.c, "启用")) {
        confirmWarning(
          "启用操作",
          `确定启用团队客户 ${row.teamName} ？`,
          () => {
            open(row.id).then((res) => {
              this.query();
              msgSuccess();
            });
          }
        );
      }
      if (strEquals(_command.c, "禁用")) {
        confirmWarning(
          "禁用操作",
          `确定禁用团队客户 ${row.teamName} ？`,
          () => {
            close(row.id).then((res) => {
              this.query();
              msgSuccess();
            });
          }
        );
      }
      if (strEquals(_command.c, "查看")) {
        this.$emit("detail", row.id);
      }
      if (strEquals(_command.c, "登陆账号")) {
        this.accountInfo = row;
        this.showLoginAccountDialog = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.my-table {
  ::v-deep .el-button--small {
    padding: 0 5px !important;
    font-size: 14px !important;
  }

  ::v-deep td {
    padding: 8px 0 !important;
  }
}
</style>
